<template>
  <el-drawer
    :visible="localVisible"
    direction="rtl"
    title="Settings"
    size="450px"
    @close="handleClose"
  >
    <!-- Modify database name -->
    <section class="section">
      <h2>Modify Database Name</h2>
      <el-form label-position="left" :model="databaseSettings">
        <el-form-item label="Current Database Name:">
          <span style="font-weight: bold; color: #5a9cf8;">{{ selectedDatabase.name }}</span>
        </el-form-item>
        <el-form-item label="New Database Name">
          <el-input v-model="databaseSettings.name" placeholder="Please enter a new database name"></el-input>
        </el-form-item>
      </el-form>
      <div class="button-container">
        <el-button type="primary" @click="saveDatabaseName">Save Database Name</el-button>
      </div>
    </section>

    <el-divider />

    <!-- DEL Database -->
    <section class="section">
      <h2>Delect Database</h2>
      <p>Please note that once the database is deleted, it cannot be recovered.</p>
      <div class="button-container">
        <el-button type="danger" @click="delectDatabase">Delect Database</el-button>
      </div>
    </section>

    <el-divider />

    <!-- Group Members -->
    <section class="section">
      <h2>Group Members</h2>
      <ul class="members-list">
        <li v-for="member in groupMembers" :key="member.id">
          {{ member.id }} {{ member.name }}
        </li>
      </ul>
    </section>

    <el-divider />

    <!-- Support the Author -->
    <section class="section">
      <h2>Support the Author</h2>
      <p>If you like this project, please consider supporting us!</p>
      <div class="qr-container">
        <img src="@/assets/yuanshen.png" alt="QR Code for Support" />
      </div>
    </section>
  </el-drawer>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    selectedDatabase: {
      type: [],
      required: true,
    },
  },
  data() {
    return {
      databaseSettings: {
        name: "", // 新的数据库名称
      },
      groupMembers: [
        { id: 20222034045, name: "兰青" },
        { id: 20222034068, name: "陈焕炜" },
        { id: 20222034074, name: "苏毅" },
        { id: 20222034085, name: "张格玮" },
        { id: 20222034091, name: "麦志壕" },
      ],
    };
  },
  computed: {
    localVisible: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit("update:visible", value); // 通知父组件更新
      },
    },
  },
  methods: {
    // 数据库名称保存
    saveDatabaseName() {
      if (this.databaseSettings.name.trim() === "") {
        this.$message.error("Database name cannot be empty!");
        return;
      }
      // 弹出确认框
      this.$confirm(`Are you sure you want to change the database name to "${this.databaseSettings.name}"?`, "Confirm Changes", {
        confirmButtonText: "Yes",
        cancelButtonText: "No",
        type: "warning",
      })
        .then(() => {
          // 更新父组件的数据库名称
          this.$emit("update:name", this.databaseSettings.name);
          this.databaseSettings.name = ""; // 清空输入框
        })
        .catch(() => {
          this.$message.info("Database name change canceled.");
        });
    },
    // Delect Database
    delectDatabase(){
      this.$confirm("Are you sure you want to delect the database?", "Prompt", {
        confirmButtonText: "Confirm",
        cancelButtonText: "Cancel",
        type: "warning",
      })
        .then(() => {
          this.$emit("delect:database");
        })
        .catch(() => {
          this.$message.info("Delect canceled.");
        });
    },
    // Close the sidebar
    handleClose() {
      this.localVisible = false;
    },
  },
};
</script>

<style scoped>
  .section {
    margin-bottom: 20px;
    padding: 10px 20px;
  }
  .section h2 {
    color: red;
    font-size: 18px;
    margin-bottom: 10px;
  }
  .members-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .members-list li {
    margin: 5px 0;
    font-size: 14px;
  }
  .button-container {
    text-align: center;
    margin-top: 20px;
  }
  .qr-container {
    text-align: center;
    margin-top: 10px;
  }
  .qr-container img {
    width: 150px;
    height: 150px;
    border: 2px solid #ddd;
    border-radius: 8px;
  }
  .el-form-item {
    margin-bottom: 0;
  }
</style>
